<%-- 
    Document   : example3
    Created on : May 19, 2011, 1:53:04 PM
    Author     : DSokolov
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Third Example</title>
        
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
            data-dojo-config="isDebug: true,parseOnLoad: true"></script>
<!--        <script src="js/dojo/dojo/dojo.js"></script>-->

        <script src="highlight/scripts/shCore.js"></script>
        <link type="text/css" rel="stylesheet" href="highlight/styles/shCoreDefault.css"/>
                    
        <script src='highlight/scripts/shBrushXml.js' type='text/javascript'></script>
        <script src='highlight/scripts/shBrushCss.js' type='text/javascript'></script>
        <script>
            
        </script>
        
        <style>
            body {
                padding: 2em;
            }
            h1 {
                margin-bottom: 2em;
            }
            .add-borders ul, .add-borders li, .add-borders div, .add-borders a {
                padding: 2px;
            }
            .add-borders ul {
                border: 1px solid red;
            }
            .add-borders li {
                border: 1px solid blue;
            }
            .add-borders div {
                border: 1px solid green;
            }
            .add-borders a {
                border: 1px solid black;
            }
            .bold {
                font-weight: bold;
            }
            .italic {
                font-style: italic;
            }
            .highlight {
                background-color: yellow;
            }
            .red {
                background-color: red;
            }
            .blue {
                background-color: blue;
            }

        
        </style>
    </head>
    <body>
        <h1>The Third Example of DOJO</h1>
        <p>This example covers these aspects:</p>
        <ul>
            <li>dojo.version</li>
            <li>dojo.ready</li>
            <li>dojo.require</li>
        </ul>
        
        <table>
            <tr>
                <td style="width: 300px;" valign="top">
                    <ul id="list">
                        <li class="odd">
                            <div class="bold">
                                <a class="odd">Odd</a>
                            </div>
                        </li>
                        <li class="even">
                            <div class="italic">
                                <a class="even">Even</a>
                            </div>
                        </li>
                        <li class="odd">
                            <a class="odd">Odd</a>
                        </li>
                        <li class="even">
                            <div class="bold">
                                <a class="even">Even</a>
                            </div>
                        </li>
                        <li class="odd">
                            <div class="italic">
                                <a class="odd">Odd</a>
                            </div>
                        </li>
                        <li class="even">
                            <a class="even">Even</a>
                        </li>
                    </ul>

                    <ul id="list2">
                        <li class="odd">Odd<li>
                    </ul>
                </td>
                <td>
                    <pre class="brush: html;">
                        &lt;ul id="list"&gt;
                                &lt;li class="odd"&gt;

                                        &lt;div class="bold"&gt;
                                                &lt;a class="odd"&gt;Odd&lt;/a&gt;
                                        &lt;/div&gt;
                                &lt;/li&gt;
                                &lt;li class="even"&gt;

                                        &lt;div class="italic"&gt;
                                                &lt;a class="even"&gt;Even&lt;/a&gt;
                                        &lt;/div&gt;
                                &lt;/li&gt;
                                &lt;li class="odd"&gt;

                                        &lt;a class="odd"&gt;Odd&lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li class="even"&gt;
                                        &lt;div class="bold"&gt;
                                                &lt;a class="even"&gt;Even&lt;/a&gt;

                                        &lt;/div&gt;
                                &lt;/li&gt;
                                &lt;li class="odd"&gt;
                                        &lt;div class="italic"&gt;
                                                &lt;a class="odd"&gt;Odd&lt;/a&gt;

                                        &lt;/div&gt;
                                &lt;/li&gt;
                                &lt;li class="even"&gt;
                                        &lt;a class="even"&gt;Even&lt;/a&gt;
                                &lt;/li&gt;

                        &lt;/ul&gt;

                        &lt;ul id="list2"&gt;
                                &lt;li class="odd"&gt;Odd&lt;/li&gt;
                        &lt;/ul&gt;
                    </pre>
                    
                </td>
            </tr>
        </table>
        
        <script>
            SyntaxHighlighter.all();
        </script>
        
    </body>
</html>
